<template>
	<view>
		<NavBarVue :title="'新增关注'"></NavBarVue>
		<view class="collectul">
			<view class="collectli" v-for="item in list" :key="item.id">
				<BaseCoverImage :src="item.img" style="width: 40px;height: 40px;border-radius: 25px;" />
				<view class="li_center">
					<view style="font-size: 14px;">{{item.name}}</view>
					<view class="li_div">开始关注你了&nbsp;&nbsp;5天前</view>
				</view>
				<button style="">回关</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import NavBarVue from '../../../components/NavBar.vue';
	import {ref} from 'vue'
	const list=ref([
		{id:1,name:'一盒子',img:'/static/images/1002.png',time:'02-03'},
		{id:2,name:'贺小鲜',img:'/static/images/1003.png',time:'02-03'},
		{id:3,name:'大王大王wong',img:'/static/images/1004.png',time:'02-03'},
		{id:4,name:'烦死了把你们豆沙漏',img:'/static/images/1005.png',time:'02-03'},
		{id:5,name:'集结号',img:'/static/images/1006.png',time:'02-03'},
		{id:6,name:'世界你好',img:'/static/images/1001.png',time:'02-03'},
	])
</script>

<style scoped lang="scss">
	.collectul{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 0 20rpx;
		.collectli{
			width: 100%;
			height: 70px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;
			.li_center {
				width: 270px;
				height: 55px;
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content:space-evenly;
			}
			> button {
				width: 60px; 
				height: 30px;
				background: rgb(254, 84, 106);
				line-height: 30px;
				color: #fff;
				border-radius: 15px;
				font-size: 13px;
				margin: 0px;
			}
		}
	}
	.li_div {
		font-size: 12px;
		color: #aaa;
	}
</style>